<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./htmlParser.css">
  <title>HTML解析器</title>
</head>

<body>
  <textarea class="text" rows="10" placeholder="请输入HTML内容"></textarea>
  <div class="box">
    <button class="btn">解析为纯文本</button>
    <input class="count" type="number" placeholder="最大字数">
  </div>
  <textarea class="text ok" rows="10" cols="30" disabled placeholder="解析结果..."></textarea>

  <script type="module">
    import extractPlainText from './htmlParser.js'
    const text = document.querySelector('.text')
    const textOk = document.querySelector('.ok')
    const btn = document.querySelector('.btn')
    const count = document.querySelector('.count')
    text.innerHTML = '<h1>Holle World</h1>'
    btn.addEventListener('click', () => {
      textOk.value = extractPlainText(text.value, count.value)
    })
    btn.click()
  </script>
</body>

</html>